<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="BIG5"%>
<%@ page import="mo.org.cm309.shoppingcart.entity.Product, java.util.List" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Show Shopping Cart</title>
		<!-- <link rel="stylesheet" href="css/black-tie/jquery-ui-1.9.0.custom.css" type="text/css" /> -->
		<!-- <link rel="stylesheet" href="css/theme1.css" type="text/css" /> -->
		<!-- <link rel="stylesheet" href="css/style.css" type="text/css" /> -->
		<style type="text/css" title="currentStyle">
			@import "release-datatables/media/css/demo_page.css";
			@import "release-datatables/media/css/demo_table_jui.css";
			@import "css/black-tie/jquery-ui-1.9.0.custom.css";
			@import "release-datatables/media/css/ColReorder.css";
		</style>
		<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
		<!--  <script type="text/javascript" src="js/jquery-ui-1.9.0.custom.js"></script> -->
		<!--  <script type="text/javascript" language="javascript" src="release-datatables/media/js/jquery.js"></script> -->
		<script type="text/javascript" language="javascript" src="release-datatables/media/js/jquery.dataTables.js"></script>
		<script type="text/javascript" language="javascript" src="release-datatables/media/js/ColReorder.js"></script>
		<!-- <script type="text/javascript" src="js/common.js"></script> -->
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				var oTable = $('#listCart').dataTable( {
					"sDom": '<"H"Cfr>t<"F"ip>',
					"bJQueryUI": true,
					"bSortClasses": false
				});
				
				oTable.$('td').hover( function() {
					var iCol = $('td', this.parentNode).index(this) % 5;
					$(oTable.$('tr')).addClass( 'highlighted' );
				}, function() {
					oTable.$('td.highlighted').removeClass('highlighted');
				} );
			});
		</script>

</head>
<body id="dt_example" class="ex_highlight">

	<script type="text/javascript">

(function(){
  var bsa = document.createElement('script');
     bsa.type = 'text/javascript';
     bsa.async = true;
     bsa.src = '//s3.buysellads.com/ac/bsa.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();

  //setTimeout( function () {
  //	if ( typeof _bsap != 'undefined' ) {
  //		$('#header_advert>a').css('display', 'block');
  //	}
  //	else {
  //		$('#donate_advert').click( function() {
  //			window.location.href = "/donate";
  //		} ).css('display', 'block');
  //	}
  //}, 3000 );
</script>
	<jsp:useBean id="cart" class="mo.org.cm309.shoppingcart.entity.Cart" scope="session"></jsp:useBean>
	<jsp:include page="sections/header.jsp" />
		<div id="container">
			<div id="demo">
			    <table id="listCart" cellpadding="0" cellspacing="0" border="0" class="display">
			    	<thead>
			    		<tr>
			    			<th>Product Id</th>
			    			<th>Product Name</th>
			    			<th>Category</th>
			    			<th>Brand</th>
			    			<th>Supplier</th>
			    			<th>Description</th>
			    			<th>Price</th>
			    			<th>Discount</th>
			    			<th>Stock</th>
			    			<th>Quantity</th>
			    		</tr>
			    	</thead>
			    	<tbody>
			    		<%  List<Product> products = cart.getProductList();
			    			for (Product product : products){%>
			    			<tr class="gradeU">
			    				<td><%=product.getId()%></td>
			    				<td><%=product.getProductname()%></td>
			    				<td><%=product.getCategory()%></td>
			    				<td><%=product.getBrand()%></td>
			    				<td><%=product.getSupplier()%></td>
			    				<td><%=product.getDesc()%></td>
			    				<td><%=product.getPrice()%></td>
			    				<td><%=product.getDiscount()%></td>
			    				<td><%=product.getStock()%></td>
			    				<td><%=product.getQuantity()%></td>
			    			</tr>
			    		<%} %>
			    	</tbody>
			    	<tfoot>
			    		<tr>
			    			<th>Product Id</th>
			    			<th>Product Name</th>
			    			<th>Category</th>
			    			<th>Brand</th>
			    			<th>Supplier</th>
			    			<th>Description</th>
			    			<th>Price</th>
			    			<th>Discount</th>
			    			<th>Stock</th>
			    			<th>Quantity</th>
			    		</tr>
			    	</tfoot>
			    </table>
			</div>
		</div>
</body>
</html>